<template>
    <div class="main">
        <div v-if="dataTrue==true && token !=''" class="show-main">
            <div class="content">
                <div class="edit">
                    <div class="edit-left">
                        <img src="@/assets/images/通用.png">
                        <span>购物车</span>
                    </div>
                    <div class="edit-right" v-if="edit==false" @click="edit=true">编辑</div>
                    <div class="edit-right" v-else @click="edit=false">完成</div>
                </div>
                <div class="list">
                    <div class="list-item" v-for="item in data" :key="item.key">
                        <div class="item-check">
                            <label>
                                <input type="checkbox" v-model="item.selected" class="checkbox">
                                <div class="checked"></div>
                            </label>
                        </div>
                        <div class="item-img">
                            <img :src="item.pic">
                        </div>
                        <div class="item-content">
                            <div class="title">{{item.name}}</div>
                            <div class="prop">
                                <span v-for="items in item.sku" :key="items.id">{{items.optionValueName}}&nbsp;&nbsp;</span>
                            </div>
                            <div class="price">
                                <div>
                                    <span style="fontSize: 0.48rem;color:#1BA784;">￥</span>
                                    <span style="fontSize: 0.72rem;color:#1BA784;">{{item.price}}.00</span>
                                </div>
                                <div class="num">
                                    <button class="reduce" @click="item.number>1? item.number-- :''"></button>
                                    <input type="text" v-model="item.number">
                                    <button class="add" @click="item.number ++"></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="count">
                <div class="left">
                    <label style="display: flex; alignItems: center;">
                        <input type="checkbox" v-model="flag" @click="checked" class="checkbox">
                        <div class="checked"></div>
                        <span style="fontSize:.56rem;marginLeft: .32rem;">全选</span>
                    </label>
                </div>
                <div class="total" v-if="edit==false">
                    <span style="fontSize:.56rem;">合计：</span>
                    <span style="fontSize:.48rem; color:#1BA784;">￥</span>
                    <span style="fontSize:.8rem; color:#1BA784;fontWeight: 700;">{{total}}</span>
                </div>
                <van-button class="button" v-if="edit==false">去结算({{num}})</van-button>
                <van-button class="button remove" v-else @click="remove">删除</van-button>
            </div>
        </div>
        <div class="empty" v-if="dataTrue==false && token !=''">
            <div class="empty-img">
                <img src="@/assets/images/购物车.png">
            </div>
            <div class="empty-bottom">
                <div class="empty-title">购物车快饿瘪了 T.T</div>
                <div class="empty-txt">快给我挑点宝贝</div>
                <button @click="goHome">去逛逛</button>
            </div>
        </div>
        <div class="notLogin" v-if="token ==''">
            <div class="login-img">
                <img src="@/assets/images/购物车.png">
            </div>
            <div class="login-bottom">
                <div class="login-title">登录后才能看到您的购物车</div>
                <button @click="goLogin">去登录</button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            data: [],
            flag: true,
            dataTrue: false,
            token: "",
            edit: false,
        }
    },
    methods: {
        run() {
            this.request({
                method: "get",
                url: "/shopping-cart/info"
            }).then(res => {
                this.data = res.data.items
                console.log(this.data)
            }).catch(err => {
                console.log(err)
                if (err == "当前登录token无效，请重新登录") {
                    this.token = ""
                }
            })
        },
        checked() {
            this.data.forEach(item => {
                item.selected = !this.flag
            });
        },
        goLogin() {
            this.$router.push("/login")
        },
        goHome() {
            this.$router.push("/home")
        },
        remove() {
            if (this.flag) {
                this.request({
                    method: "post",
                    url: "/shopping-cart/empty"
                }).then(res => {
                    console.log(res)
                    this.dataTrue = false
                })
            } else {
                this.checkMore.forEach(item => {
                    this.request({
                        method: "post",
                        url: "/shopping-cart/remove",
                        params: {
                            key: item.key
                        }
                    }).then(res => {
                        console.log(res)
                        window.location.reload()
                    })
                })
            }

        }
    },
    mounted() {
        if (window.localStorage.getItem('token')) {
            this.token = window.localStorage.getItem('token')
        }
        this.run()
    },
    computed: {
        total() {
            var arr = this.data.filter(item => {
                return item.selected == true
            })
            return arr.reduce(function (prev, item) {
                return prev + item.number * item.price
            }, 0).toFixed(2)
        },
        num() {
            var arr = this.data.filter(item => {
                return item.selected = true
            })
            return arr.reduce(function (prev, item) {
                return prev + item.number
            }, 0)
        },
        checkMore() {
            return this.data.filter(item => {
                return item.selected == true
            })
        }
    },
    updated() {
        var res = this.data.filter(item => {
            return item.selected == true
        })
        this.flag = res.length == this.data.length ? true : false
    },
    watch: {
        data(value) {
            if (value != []) {
                this.dataTrue = true
            }
        }
    }
}
</script>

<style scoped>
.empty,
.notLogin {
    text-align: center;
    padding: .8rem 0 1.28rem;
    display: flex;
    height: calc(100vh - 2rem);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.empty-img,
.login-img {
    width: 6.4rem;
    height: 6.4rem;
}

.empty-img img,
.login-img img {
    width: 6.4rem;
    height: 6.4rem;
}

.empty-bottom,
.login-bottom {
    margin-top: .96rem;
}

.empty-title,
.login-title {
    margin-bottom: .32rem;
    font-size: .56rem;
    color: #323233;
}

.empty-txt {
    font-size: .56rem;
    color: #969799;
}

.empty-bottom button,
.login-bottom button {
    box-sizing: border-box;
    height: 1.28rem;
    width: 2.92rem;
    line-height: 1.2rem;
    font-size: .56rem;
    margin: .4rem auto 0;
    border-radius: .64rem;
    outline: none;
    border: 0.02rem solid #1ba784;
    background: white;
    color: #1ba784;
}

.login-bottom button {
    color: white;
    background: #1ba784;
}

.main {
    background: #f2f3f5;
    box-sizing: border-box;
    /* height: calc(100vh - 4rem);
    overflow: auto; */
}

.show-main {
    box-sizing: border-box;
    padding: .4rem 0;
    height: calc(100vh - 2rem);
    overflow: auto;
}

.content {
    margin: 0 .4rem;
    background: white;
    border-radius: .32rem;
    box-sizing: border-box;
    margin-bottom: 2rem;
}

.edit {
    height: 1.76rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 .6rem;
    border-bottom: 0.02rem solid #ebedf0;
    -webkit-box-align: center;
    box-sizing: border-box;
}

.edit-left {
    display: flex;
    align-items: center;
}

.edit img {
    width: 0.8rem;
    height: 0.8rem;
    margin-right: .8rem;
}

.edit span {
    font-size: .56rem;
}

.edit-right {
    width: 6.5rem;
    color: #1989fa;
    text-align: right;
    font-size: .56rem;
}

.list {
    padding-top: .4rem;
    box-sizing: border-box;
}

.list-item {
    padding: .32rem .6rem;
    display: flex;
    box-sizing: border-box;
    height: 4.24rem;
    align-items: center;
    justify-content: space-between;
}

.title {
    font-size: .56rem;
    height: .72rem;
}

.prop {
    font-size: .48rem;
    color: #969799;
    height: 1.76rem;
}

.price {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.checked {
    width: .8rem;
    height: .8rem;
    border: 0.02rem solid #969799;
    border-radius: 50%;
}

.checkbox {
    display: none;
}

.checkbox:checked~.checked {
    background: #1ba784 no-repeat;
    background-image: url(@/assets/images/通用.png);
    background-size: .8rem .8rem;
}

.item-img {
    width: 3.6rem;
    height: 3.6rem;
}

.item-img img {
    width: 3.6rem;
}

.item-content {
    width: 7.8rem;
}

.count {
    box-sizing: border-box;
    position: fixed;
    height: 2rem;
    width: 100%;
    left: 0;
    bottom: 2rem;
    padding: 0 .64rem;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.num {
    display: flex;
}

.reduce,
.add {
    width: 1.12rem;
    height: 1.12rem;
    position: relative;
    outline: none;
    border: none;
    background: #f2f3f5;
}

input {
    height: 1.12rem;
    width: 1.28rem;
    outline: none;
    border: none;
    background: #f2f3f5;
    margin: 0 .08rem;
    font-size: .56rem;
    text-align: center;

    box-sizing: border-box;
    padding: 0;
    line-height: normal;
    vertical-align: middle;
    border-width: 0.02rem 0;
}

.reduce::after,
.add::after,
.add::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: "";
    height: .02rem;
    width: .56rem;
    background: #969799;
}

.add::before {
    width: .02rem;
    height: .56rem;
}

.left {
    display: flex;

}


.total {
    display: flex;
    flex: 1;
    justify-content: flex-end;
    padding-right: .6rem;
    align-items: center;
}

.button {
    width: 4.4rem;
    height: 1.6rem;
    border-radius: .8rem;
    font-size: .56rem;
    background: rgb(27, 167, 132);
    color: white;
}

.remove {
    border: 1px solid #ccc;
    background: #fff;
    color: black;
}
</style>
